
import React from 'react'
import {Card,Row,Col,Button,Icon,Form, Input,Select, Radio,DatePicker,message,Spin } from 'antd';
import moment from 'moment';
import {Link} from 'react-router-dom'
import PureRenderMixin from 'react-addons-pure-render-mixin'

import LeftMenu from 'component/leftmenu/index.jsx';
import HeadImgContent from 'component/headimgcontent/index.jsx';
import LeftMenuItem from 'component/leftmenuitem/index.jsx';


import MMUtile from 'util/mm.jsx'
import Safty from 'service/safty-service.jsx'
import Verify from 'component/verify/index.jsx';
const _mm = new MMUtile();
const _safty = new Safty();


const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;


let residences = [];	

let userInfo = _mm.getStorage('userInfo')?JSON.parse(_mm.getStorage('userInfo')):{};
class SecurityForm extends React.Component{
	constructor(props){
		super(props);
		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);

		this.state = {
			loading:true,
			phones:'',
			isFirstSecurity:true,
			isCheckPhone:false,
			question1:'',
			question2:'',
			question3:'',
			answer1:'',
			answer2:'',
			answer3:'',
			items:[{'name':'修改密码','actived':false,'link':'/updatepsw','icon':'edit'},
			{'name':'密保设置','actived':true,'link':'','icon':'key'},
			{'name':'绑定手机','actived':false,'link':'/updatephone','icon':'mobile'},
			{'name':'登录邮箱','actived':false,'link':'/updateemail','icon':'mail'},
			{'name':'登录记录','actived':false,'link':'/recordsafty','icon':'profile'}]
		}

		
	}
	componentWillMount(){
		
		//获取手机号
		$.ajax({
      url     : 'user/getPhone.act',
      type  : 'POST',
      async: false,
      success:(res)=>{
      	this.setState({
					phones:res.content,
					isFirstPhone:false
				})
      },error:(res)=>{
      	_mm.errorTips(res.message)
      }
		})
		//获取密保
		_safty.getEncrypted().then((res)=>{
			if(res){
				this.setState({
					isFirstSecurity:true,
					question1:res.question1,
					question2:res.question2,
					question3:res.question3,
					answer1:res.answer1,
					answer2:res.answer2,
					answer3:res.answer3
				})
			}
		
			this.setState({
				loading:false
			})
		},(errMsg)=>{
				this.setState({
					loading:false
				})
			_mm.errorTips(errMsg)
		})
	}
	
	componentWillUpdate(){
		userInfo = _mm.getStorage('userInfo')?JSON.parse(_mm.getStorage('userInfo')):{};
	}
	handleSubmit(e){
    e.preventDefault();
    
    this.props.form.validateFieldsAndScroll((err, values) => {
    	if (err) {
        return;
      }
      if(!values.question1 && !values.question2 && !values.question3 && !values.answer1 && !values.answer2 && !values.answer3){
      	message.error('请输入密保内容或选择密保问题');
      	return ;
      }
      if(values.question1 === values.question2 || values.question3 === values.question2 || values.question3 === values.question1){
      	message.error('您不能选择相同的密保问题');
      	return ;
      }
			_safty.setEncrypted({
					question1:values.question1,
					question2:values.question2,
					question3:values.question3,
					answer1:values.answer1,
					answer2:values.answer2,
					answer3:values.answer3
			}).then((res)=>{
				userInfo.Security = '0';
				_mm.setStorage('userInfo',userInfo);
				message.success('用户密保保存成功');
				this.props.history.push('/');
			},(errMsg)=>{
				_mm.errorTips(errMsg);
			})
      
    });
  }

	getIsCodeRight(callback){
		this.setState({
			isCheckPhone:callback.isCodeRight
		})
	}
	render(){
		const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
      },
    };
		return(
			
			<div>
				<Row gutter={24}>
					<Col span={7}>
		        <Card bordered={true} className="itemminheight"><LeftMenuItem items={this.state.items}></LeftMenuItem></Card>
		      </Col>
		      <Col span={17}>
      			<Spin spinning={this.state.loading} delay={500}  size="large">
						{
							!this.state.isCheckPhone
							?
								<Card title="获取验证码" bordered={false}>
		        			<p>密保问题可以用来进行找回密码等关键操作的身份验证，保证您帐号安全</p>
		        			<p>请勿随意泄露密保问题，以防不法分子利用，造成个人损失</p>
									<Verify phone={userInfo.phone} email={userInfo.email} getIsCodeRight={this.getIsCodeRight.bind(this)}></Verify>
								</Card>
							:
								<Form onSubmit={this.handleSubmit.bind(this)}>
					        <Card title="设置密保" bordered={false}>
					        	
					        	<Row>
					        		<Col span={16}>
												<FormItem
							          {...formItemLayout}
							          label="问题1"
								        >
								          {getFieldDecorator('question1', {
								            initialValue:this.state.question1,
								          })(
								            <Select >
												      <Option value="">请选择</Option>
												      <Option value="A" >您的父亲的姓名?</Option>
												      <Option value="B" >您的母亲的姓名?</Option>
												      <Option value="C" >您的小学班主任的姓名?</Option>
												      <Option value="D" >您的小学学校名称?</Option>
												      <Option value="E" >您的中学学校名称?</Option>
												      <Option value="F" >您的配偶的姓名?</Option>
												      <Option value="G" >您的生日是?</Option>
												      <Option value="H" >您的父亲的生日?</Option>
												      <Option value="I" >您的母亲的生日?</Option>
												    </Select>
								          )}
								        </FormItem>
					        		</Col>
					        		<Col span={16}>
												<FormItem
													{...formItemLayout}
								          label="答案">
								          {getFieldDecorator('answer1', {
								            initialValue:this.state.answer1,
								          })(
								          <Input placeholder="请输入答案" />)}
								        </FormItem>
					        		</Col>
					        		<Col span={16}>
												<FormItem
							          {...formItemLayout}
							          label="问题2"
								        >
								          {getFieldDecorator('question2', {
								            initialValue:this.state.question2,
								          })(
								            <Select >
												      <Option value="">请选择</Option>
												      <Option value="A" >您的父亲的姓名?</Option>
												      <Option value="B" >您的母亲的姓名?</Option>
												      <Option value="C" >您的小学班主任的姓名?</Option>
												      <Option value="D" >您的小学学校名称?</Option>
												      <Option value="E" >您的中学学校名称?</Option>
												      <Option value="F" >您的配偶的姓名?</Option>
												      <Option value="G" >您的生日是?</Option>
												      <Option value="H" >您的父亲的生日?</Option>
												      <Option value="I" >您的母亲的生日?</Option>
												    </Select>
								          )}
								        </FormItem>
					        		</Col>
					        		<Col span={16}>
												<FormItem
													{...formItemLayout}
								          label="答案">
								          {getFieldDecorator('answer2', {
								            initialValue:this.state.answer2,
								          })(
								          <Input placeholder="请输入答案" />)}
								        </FormItem>
					        		</Col>
					        		<Col span={16}>
												<FormItem
							          {...formItemLayout}
							          label="问题3"
								        >
								          {getFieldDecorator('question3', {
								            initialValue:this.state.question3,
								          })(
								            <Select >
												      <Option value="">请选择</Option>
												      <Option value="A" >您的父亲的姓名?</Option>
												      <Option value="B" >您的母亲的姓名?</Option>
												      <Option value="C" >您的小学班主任的姓名?</Option>
												      <Option value="D" >您的小学学校名称?</Option>
												      <Option value="E" >您的中学学校名称?</Option>
												      <Option value="F" >您的配偶的姓名?</Option>
												      <Option value="G" >您的生日是?</Option>
												      <Option value="H" >您的父亲的生日?</Option>
												      <Option value="I" >您的母亲的生日?</Option>
												    </Select>
								          )}
								        </FormItem>
					        		</Col>
					        		<Col span={16}>
												<FormItem
													{...formItemLayout}
								          label="答案">
								          {getFieldDecorator('answer3', {
								            initialValue:this.state.answer3,
								          })(
								          <Input placeholder="请输入答案" />)}
								        </FormItem>
					        		</Col>
					        	</Row>
					        	<FormItem>
						          <Button
						            type="primary"
						            htmlType="submit"
						            style={{marginLeft: '105px'}}
						          >
						            提交
						          </Button>
						        </FormItem>
					        </Card>
								</Form>
						}
						</Spin>
		      </Col>
				</Row>
			</div>
		)
	}
}
const Security = Form.create()(SecurityForm);
export default Security;